<!DOCTYPE html>
<html lang="en"	data-ng-app="DevToolsApp" data-ng-csp>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="shortcut icon" href="ico/favicon.ico">

		<title>Dev Tools App Wrapper</title>

		<!-- Bootstrap -->
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link href="css/angular-csp.css" rel="stylesheet">
		<link href="css/inspectorwrapper.css" rel="stylesheet" type="text/css">
	</head>
	<body data-ng-controller="DevToolsController">
		<nav style="-webkit-app-region: drag;" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
			<div class="container-fluid">
				<!-- Brand and toggle get grouped for better mobile display -->
				<div style="-webkit-app-region: no-drag;" class="navbar-header">
					<a class="navbar-brand" href="#"><img style="vertical-align: middle" src="devtools16.png"/></a>
				</div>
				<h4 class="navbar-text"> DevTools App <small>{{app.version}}</small></h4>
				<ul style="-webkit-app-region: no-drag;" class="nav navbar-nav pull-right">
					<li>
						<ul class="nav nav-pills" id="contentTabs">
							<li class="navbar-btn">
								<a href="#debuggerTab" role="tab" data-toggle="tab">Debugger</a>
							</li>
							<li class="navbar-btn active">
								<a href="#infoTab" role="tab" data-toggle="tab">Info</a>
							</li>
							<li class="navbar-btn">
								<a href="#blogTab" role="tab" data-toggle="tab">Blog</a>
							</li>
							<li class="navbar-btn">
								<a href="#gitHubTab" role="tab" data-toggle="tab">GitHub</a>
							</li>
							<li class="navbar-btn">
								<a href="#apiTab" role="tab" data-toggle="tab">API</a>
							</li>
						</ul>
					</li>
					<li>
						<a data-ng-show="connectFormShowing" data-ng-click="hideConnectForm()" href="#"><span class="glyphicon glyphicon-chevron-up"></span></a>
						<a data-ng-hide="connectFormShowing" data-ng-click="showConnectForm()" href="#" title="Show connection form"><span class="glyphicon glyphicon-chevron-down"></span></a>
					</li>
					<li>
						<a data-ng-click="duplicate()" href="#" title="Clone"><span class="glyphicon glyphicon-duplicate"></span></a>
					</li>
					<li>
						<a data-ng-click="minimize()" href="#"><span class="glyphicon glyphicon-minus"></span></a>
					</li>
					<li>
						<a data-ng-click="toggleMaximize()" href="#"><span class="glyphicon glyphicon-fullscreen"></span></a>
					</li>
					<li>
						<a data-ng-click="exit()" href="#"><span class="glyphicon glyphicon-remove"></span></a>
					</li>
				</ul>
			</div>
		</nav>
		
		<div class="connectpanel collapse in container-fluid" id="connectform">
			<form class="form-inline" role="form">
				<div class="form-group">
					<label for="host" class="control-label">http://</label>
					<input data-ng-model="config.host" class="form-control" placeholder="localhost" size="4" title="Host where the debug target is running">
					<label class="control-label">:</label>
					<input data-ng-model="config.port" class="form-control" placeholder="9222" size="1" title="Port specified in --remote-debugging-port={{config.port}} when launching target Chrome">
					<label class="control-label">/#</label>
				</div>
				<div class="form-group">
					<div id="devtoolsurlinputgroup" class="input-group">
						<input id="devtoolsUrl" type="text" class="form-control" title="Devtools URL"
							data-ng-model="config.devtoolsUrl"
							data-ng-click="showAvailableInfo()" 
							data-toggle="popover" data-placement="bottom" data-trigger="manual" data-container="body"/>
						<span class="input-group-btn" style="width: 1% !important">
							<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
								<span class="caret"></span>
							</button>
							<ul class="dropdown-menu pull-right" style="background-color: white !important;">
								<li data-ng-repeat="devtoolsUrl in config.devtoolsUrls">
									<button class="btn btn-default btn-block" style="text-align: left !important; padding-left: 5px;padding-right: 5px;" data-ng-click="setDevtoolsUrl(devtoolsUrl)">
										{{devtoolsUrl}}
									</button>
								</li>
							</ul>
						</span>
					</div>
				</div>
                <button type="button" data-ng-click="copyUrl()" class="btn btn-default" title="Copy the URL to clipboard for use in Chrome">
                	<span class="glyphicon glyphicon-copy"></span>
            	</button>
            	<div class="checkbox">
				    <label>
				        <input type="checkbox" ng-model="config.experiments"> Experiments
				    </label>
				</div>
                <button type="button" data-ng-click="reconnect()" class="btn btn-default"><span class="glyphicon glyphicon-play"></span></button>
			</form>
		</div>
		<!-- Nav tabs -->
		<div>
			<!-- Tab panes -->
			<div class="tab-content">
				<div class="tab-pane" id="debuggerTab">
					<webview id="debuggerview" style="width: 700px; height: 500px;" src="about:blank" />
				</div>
				<div class="tab-pane active" id="infoTab">
					<webview id="infoview" style="width: 700px; height: 500px;" src="https://developers.google.com/chrome-developer-tools/docs/debugger-protocol#remote" />
				</div>
				<div class="tab-pane" id="blogTab">
					<webview id="blogview" style="width: 700px; height: 500px;" src="http://sandipchitale.blogspot.com/2014/05/devtoolsapp.html" />
				</div>
				<div class="tab-pane" id="gitHubTab">
					<webview id="githubview" style="width: 700px; height: 500px;" src="https://github.com/sandipchitale/DevToolsApp" />
				</div>
				<div class="tab-pane" id="apiTab">
					<div class="container">
						<div class="row">
							<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
								<form class="form-inline" role="form">
									<div class="form-group">
										<div class="input-group">
											<input id="api" type="text" class="form-control" placeholder="Search for Web and JavaScript API e.g. Window, HTMLElement, RegExp, setTimeout" data-ng-model="api"/>
											<span class="input-group-btn" style="width: 1% !important">
												<button type="button" class="btn btn-default" data-ng-click="showApi(api)">
													<span class="glyphicon glyphicon glyphicon-book"></span>
												</button>
											</span>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<webview id="apiview" style="width: 700px; height: 500px;" src="https://developer.chrome.com/extensions/devtools" />
				</div>
			</div>
		</div>

        <textarea id="clipboard" size="0"></textarea>


		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
		<script src="js/jquery.min.js"></script>
		<!-- Include all compiled plugins (below), or include individual files as needed -->
		<script src="js/bootstrap.min.js"></script>
		<script src="js/angular.min.js"></script>
		<script src="js/inspectorwrapper.js"></script>
	</body>
</html>